<template>
  <el-dialog title="可选过滤" :close-on-click-modal="false" :visible.sync="visible" center>
    <el-button class="miui-dialog-close-btn" @click="visible = false">关闭页面</el-button>
    <el-form :model="dataForm" ref="dataForm" label-width="80px">
      <el-form-item label="字段">
        <div style="padding: 10px;border: solid 1px #e7e7e7;background-color: #fff;">
          <el-button type="info" plain style="margin: 3px;" v-for="(fieldItem,fieldIndex) in fieldName" :key="fieldIndex" @click="fieldClickHandle(fieldItem,fieldIndex)">
            {{fieldItem.column}}<span v-if="fieldItem.alias">({{fieldItem.alias}})</span>
          </el-button>
        </div>
      </el-form-item>
      <el-form-item label="过滤">
        <div style="padding: 10px;border: solid 1px #e7e7e7;background-color: #fff;min-height: 30px;">
          <el-button-group style="margin: 3px;" v-for="(filterItem,filterIndex) in dataForm.filters" :key="'filter'+filterIndex">
            <el-button type="info" plain>{{filterItem.col}}</el-button>
            <el-button type="info" plain icon="el-icon-edit" @click="filterEdit(filterItem,filterIndex)"></el-button>
            <el-button type="info" plain icon="el-icon-delete" @click="filterDel(filterIndex)"></el-button>
          </el-button-group>
        </div>
      </el-form-item>
      <el-form-item label="别名">
        <el-input v-model="dataForm.group"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="info" @click="visible = false">关 闭</el-button>
      <el-button type="primary" @click="saveData">保 存</el-button>
    </span>

    <!-- 弹窗，设置过滤值 -->
    <filter-edit v-if="editVisible" ref="editDialog" @refreshParams="getFilterData"></filter-edit>
  </el-dialog>
</template>

<script>

  import { testData } from '@/api/cboard/cboard'

  import FilterEdit from './defaultset'

  export default {
    name: "test",
    data() {
      return {
        visible: false,
        editVisible: false,
        type: '',
        fieldName: [],
        datasetId: '',
        dataForm: {
          filters: [],
          group: ''
        }
      }
    },
    components: {
      FilterEdit
    },
    methods: {
      init(type,datasetId,data,list) {
        this.visible = true
        this.type = type
        this.fieldName = list
        this.datasetId = datasetId

        this.dataForm = JSON.parse(JSON.stringify(data))
        if(type == 'add'){
          this.$set(this.dataForm, 'filters', [])
          this.$set(this.dataForm, 'group', '')
        }

      },
      // 点击字段
      fieldClickHandle(item,index){
        let obj = {
          col: item.column,
          type: '=',
          values: []
        }
        this.dataForm.filters.push(obj)
      },
      // 编辑过滤默认值
      filterEdit(item,index){
        this.editVisible = true
        this.$nextTick(() => {
          this.$refs.editDialog.init(this.datasetId,item,index)
        })
      },
      // 获取过滤字段值
      getFilterData(row){
        this.dataForm.filters[row.index] = row.data
        this.dataForm.filters = [...this.dataForm.filters]
      },
      // 删除过滤字段
      filterDel(index){
        this.dataForm.filters.splice(index,1)
      },
      // 保存表达式
      saveData(){
        if(this.dataForm.group){
          let timestamp = new Date().getTime()
          this.dataForm.timestamp = (this.dataForm.timestamp) ? this.dataForm.timestamp : timestamp
          this.visible = false
          this.$emit('refreshFilter',{type: this.type,data: this.dataForm})
        }else{
          this.$message.warning('表达式别名不能为空')
        }
      }
    }
  }
</script>

<style scoped>

</style>
